<template>
<div class="imageview">
  <Carousel v-model="imageIndex">
    <CarouselItem v-for="item in images.images.items" :key="item.id" class="item">
      <img class="image" :src="getFullUrl(item.url)" @click="onClickImage(item)"/>
    </CarouselItem>
  </Carousel>
</div>
</template>

<script>
  // import HttpApi from '@/service/httpApi'
  // import Rest from '@/service/rest'
  import { mapState } from 'vuex'
  import Config from '@/config'

  export default {
    name: 'imageview',
    components: {
    },
    data () {
      return {
        imageIndex: 0
      }
    },
    computed: {
      ...mapState(['images'])
    },
    created () {
      this.imageId = parseInt(this.$route.params.id)
      console.log('imageId: ' + this.imageId)
      this.imageIndex = this.images.images.items.findIndex(function (element) { return element.id === this.imageId }, this)
      console.log('index: ' + this.imageIndex)
      console.log(this.images.images.items.length)
    },
    methods: {
      getFullUrl (url) {
        return Config.BASE_URL + url
      },
      onClickImage (image) {
        console.log(image)
      }
    }
  }
</script>

<style scoped>

.imageview {
  width: 100%;
  height: 100%;
  text-align: center;
}

.item {
  margin: auto;
  padding-top: 16px;
  padding-bottom: 16px;
}

</style>
